{% extends "base.html" %}
{% block title %}event{% endblock %}
{% block head %}
<style type="text/css">

</style>
{% endblock %}
{% block content %}
<div class="row">
    <div class="col-12">
        <!-- 标题 -->

        <nav class="navbar justify-content-between" style="background-color: #058dee;">

            <a class="navbar-brand">
                <img src="/static/pic/bootstrap-solid.svg" width="30" height="30" class="d-inline align-middle" alt="">
                Event
            </a>

            <span class="navbar-text">
                Navbar text with an inline element
            </span>
            <div action="{{request.path}}" method="get" class="form-inline my-2 my-lg-0 needs-validation" novalidate>
                <div class="form-group">
                </div>
                <button class="btn btn-warning  my-2 my-sm-0" type="submit">点击 查询</button>
            </div>
        </nav>
        <!-- 功能表单 -->

        <hr class="border-bottom border-danger" />
        <!-- issue卡片 -->
        <div class="card-deck">
            {% for alarm in paginate['items'] %}

            <div class="card border-success mb-3" style="max-width: 30rem;">
                <div class="card-header bg-transparent border-success">
                    <h3>
                        <span class="text-muted">报警类别:</span>
                        <span class="badge badge-info badge-pill">
                            {{alarm.event_type}}</span>
                    </h3>
                </div>
                <div class="card-body text-success">
                    <h5 class="card-title text-info">
                        <span class="badge badge-info badge-pill">关键字:</span>
                        {{ alarm['keyword'] }}
                    </h5>
                    <blockquote class="blockquote mb-0">
                        <p class="card-text text-danger">{{ alarm['content'] }}</p>
                        <footer class="blockquote-footer">
                            <cite title="Source Title">{{ alarm['source'] }}:{{ alarm['level']}}</cite>
                        </footer>
                    </blockquote>
                </div>
                <div class="card-footer bg-transparent border-success d-flex flex-row-reverse">
                    <cite title="Source Title">On:{{ alarm['timestamp']}}</cite>
                </div>
            </div>
            {% endfor %}
        </div>
        <!-- 分页 -->
        <div class="row mt-4 ">
            <div class="col-md-12 col-sm-12 ">
                <nav>
                    <ul class="pagination pagination-md justify-content-end">
                        <ul class="pagination  justify-content-end" id='page'>
                            <li class="page-item ">
                                {% if paginate.has_prev %}
                                <a class="page-link form-control" tabindex="-1"
                                    href="/show_alarm?page={{ paginate.prev_num }}">Previous</a>
                                {% endif %}
                            </li>


                            {%  for i in  paginate.iter_pages %}

                            {% if i %}
                            {%if paginate.page == i%}
                            <li class="page-item active">
                                <a class="page-link form-control" href="/show_alarm?page={{ i }}">{{ i }}</a>
                            </li>
                            {%else%}
                            <li class="page-item ">
                                <a class="page-link form-control" href="/show_alarm?page={{ i }}">{{ i }}</a>
                            </li>
                            {% endif %}
                            {% else %}
                            <li class="page-item ">
                                <a class="page-link form-control" href="/show_alarm?page={{ i }}">...</a>
                            </li>

                            {% endif %}

                            {% endfor %}

                            {% if paginate.has_next %}
                            <a class="page-link form-control" href="/show_alarm?page={{ paginate.next_num }}">Next</a>
                            {% endif %}

                            </li>
                        </ul>

                        <li class="page-item"><a class="page-link form-control">共</a></li>
                        <input id='total' name='total' disabled class="form-control" style="width: 60px;"
                            value="{{ paginate.total }}" />
                        <li class="page-item"><a class="page-link form-control">条</a></li>
                        <li class="page-item"><a class="page-link form-control">共</a></li>
                        <input id='pages' name='pages' disable class="form-control" style="width: 60px;"
                            value="{{ paginate.pages }}" />
                        <li class="page-item"><a class="page-link form-control">页</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <div class="col-12">
        <table class="table table-bordered">
            <thead id='keys'>

            </thead>
            <tbody id='values'>
            </tbody>
        </table>
    </div>
</div>
<!-- 分页 -->
<div class="row mt-2">
    <div class="col-md-12 col-sm-12 ">
        <nav id='tag_page'>

        </nav>
    </div>
</div>

<script>
    var csrftoken = $("meta[name=csrf-token]").attr("content");

    function page() {
        $.ajax({
            url: "{{url_for('cs.show_alarm')}}",
            data: {
                "id": 1,
            },
            headers: {
                "X-CSRFToken": csrftoken
            },
            type: 'post',
            dataType: 'json',
            success: pages_success,
            error: function (data) {
                console.log(data);
            },
        });
        return false
    }

    // 分页
    function pages_success(data) {
        var $keys = '';
        var $values = '';
        var $lis = '';
        var $lis1 = '';
        // console.log(data.paginate)
        var tags = data.paginate.items
        if (data.paginate.total > 0) {
            for (i in tags) {
                var keys_td = ''
                var values_td = ''
                for (t in tags[i]) {
                    keys_td += '<th scope="row" class="table-info p-1">' + t + '</th>'
                    values_td += '<td scope="row" ">' + tags[i][t] + '</td>'
                };
                $keys = `<tr>${keys_td }</tr>`
                $values +=
                    `<tr>'${values_td}</tr>`
                var $subject_keys = $('#keys');
                var $subject_values = $('#values');
                $subject_keys.html($keys)
                $subject_values.html($values)
            };
            var lis = ''
            data.paginate.iter_pages.forEach((item, index) => {
                if (item) {
                    var tmp = ''
                    if (data.paginate.page == item) {
                        tmp =
                            `<li class="page-item active "><a class="page-link form-control" href="javascript:model_page(${item}) "> ${item} </a></li>`
                    } else {
                        tmp =
                            `<li class="page-item "><a class="page-link form-control" href="javascript:model_page(${item})"> ${item} </a></li>`
                    }
                } else {
                    tmp =
                        `<li class="page-item "><a class="page-link form-control" href="javascript:void(0)">...</a></li>`
                }

                lis += tmp
            });
            var tag_page =

                `<ul class="pagination pagination-md justify-content-end">
                <li class="page-item ">
                ${ data.paginate.has_prev ?
                `<a class="page-link form-control" tabindex="-1"
                        href="javascript:model_page(${data.paginate.prev_num},1)">Previous</a>`: ''}
                        
                </li>
                ${lis}
                <li class="page-item ">
                ${ data.paginate.has_next ?
                    `<a class="page-link form-control" tabindex="-1"
                    href="javascript:model_page(${data.paginate.next_num},1)">Next</a>` : ''}
                </li>
                <li class="page-item"><a class="page-link form-control">共</a></li>
                <input id='total' name='total' disabled class="form-control" style="width: 60px;"
                    value=${ data.paginate.total } />
                <li class="page-item"><a class="page-link form-control">条</a></li>
                <li class="page-item"><a class="page-link form-control">共</a></li>
                <input id='max_pages' name='max_pages' disable class="form-control" style="width: 60px;"
                    value=${ data.paginate.pages } />
                <li class="page-item"><a class="page-link form-control">页</a></li>`;

            var $tag_page = $('#tag_page');
            $tag_page.html(tag_page);
        } else {
            $values += '<tr>' + '<td scope="row" class="table-danger">' + '没有报警信息。' + '</td>' + '</tr>';
            var $subject_con = $('#values');
            $subject_con.html($values);
        }
    }


    function model_page(page) {
        $.ajax({
            url: "{{url_for('cs.show_alarm')}}",
            data: {
                "page": page,
            },
            headers: {
                "X-CSRFToken": csrftoken
            },
            type: 'post',
            dataType: 'json',
            success: pages_success,
            error: function (data) {
                console.log(data);
            },
        });
        return false
    }

    var int = self.setInterval("page()", 5000);
    (function () {
        'use strict'

        window.addEventListener('load',
            function () {
                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                var forms = document.getElementsByClassName('needs-validation')

                // Loop over them and prevent submission
                Array.prototype.filter.call(
                    forms,
                    function (form) {
                        form.addEventListener('submit',
                            function (event) {
                                if (form.checkValidity() === false) {
                                    event.preventDefault()
                                    event.stopPropagation()
                                }
                                form.classList.add('was-validated')
                            }, false)
                    })
            }, false)
    }())
</script>
{% endblock %}